<template>
  <div class="search-input" :class="{ active: isFocus }">
    <input @focus="isFocus = true" @blur="isFocus = false" /><button>
      <svg
        t="1603979056934"
        class="search-icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1256"
      >
        <path
          d="M1017.286365 985.002397 671.57481 639.323353c60.341435-67.949137 97.339577-157.030781 97.339577-254.841776 0-212.00781-172.457511-384.465322-384.449066-384.465322C172.457511 0.016256 0 172.473767 0 384.481577c0 211.991555 172.457511 384.449066 384.465322 384.449066 97.794739 0 186.892639-36.998143 254.841776-97.339577l345.679044 345.711555c4.437826 4.437826 10.306161 6.681123 16.141984 6.681123 5.852079 0 11.720413-2.243297 16.15824-6.681123C1026.227041 1008.345689 1026.227041 993.926817 1017.286365 985.002397zM384.465322 723.251917c-186.81136 0-338.786595-151.95898-338.786595-338.77034S197.653962 45.694982 384.465322 45.694982c186.795104 0 338.77034 151.975235 338.77034 338.786595 0 85.196514-31.828806 162.931627-83.928563 222.525296-10.062324 11.476577-20.823647 22.237899-32.300224 32.300224C547.413205 691.423111 469.661835 723.251917 384.465322 723.251917z"
          p-id="1257"
        ></path>
      </svg>
    </button>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
export default {
  name: "NavSearchInput",
  setup() {
    const isFocus = ref(false);
    return {
      isFocus,
    };
  },
};
</script>

<style lang="scss" scoped>
.search-input {
  position: relative;
  font-size: 1.175rem;
  display: inline-block;
  height: 30px;
  line-height: 24px;
  box-shadow: 0 0px 1px rgb(109, 109, 109);
  input {
    padding: 0 30px 0 6px;
    font-size: inherit;
    border: none;
    outline: none;
  }
  button {
    cursor: pointer;
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0;
    border: none;
    outline: none;
    background: inherit;
    .search-icon {
      margin-top: 4px;
      fill: rgb(224, 224, 224);
    }
    transition: 0.3s;
  }
}
.search-input:hover,
.active {
  --focus-color: rgb(133, 193, 248);
  border: 1px solid var(--focus-color);
  box-shadow: 0 2px 5px var(--focus-color);
  .search-icon {
    fill: var(--focus-color);
  }
  transition: 0.3s;
}
</style>